<template>
  <div class="main">
    <el-button type="primary" @click="handleAdd">新增供应商</el-button>
    <el-table :data="currentPageData" border v-loading="loading">
      <el-table-column label="序号" type="index" width="100" align="center" :index="indexMethod"></el-table-column>
      <el-table-column label="供应商编号" prop="id" width="300" align="center"></el-table-column>
      <el-table-column label="主要负责人" align="center">
        <template #default="scope">
          <a size="small" type="primary" @click="jumpDetails(scope.row)">{{ scope.row.sup_name }}</a>
        </template>
      </el-table-column>
      <el-table-column label="地址" prop="address" align="center"></el-table-column>
      <el-table-column label="客户状态" prop="state" align="center">
        <template #default="scope">
          {{ formatState(scope.row.state) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180" align="center">
        <template #default="scope">
          <el-button size="small" type="primary" @click="jumpEdit(scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalRecords"
    >
    </el-pagination>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { useRouter } from 'vue-router';
import { getSupplierInfo, deleteSupplierInfo } from './supplier.js';

const router = useRouter();

// 响应式数据
const customerList = ref([]);
const loading = ref(false);
const currentPage = ref(1);
const pageSize = ref(5);
const totalRecords = ref(0);

// 获取客户数据
const fetchCustomerData = async () => {
  try {
    loading.value = true;
    const queryParams = {
      pageNum: currentPage.value,
      pageSize: pageSize.value
    };
    const response = await getSupplierInfo(queryParams);
    
    if (response.code === 200) {
      customerList.value = response.data.records.map(item => ({
        id: item.id || 'N/A',
        sup_name: item.primaryPerson,
        address: item.address || '地址未提供',
        state: item.state,
        primary_person: item.primary_person,
        phone: item.phone,
        email: item.email
      }));
      
      totalRecords.value = response.data.total;
    } else {
      console.error('获取数据失败:', response.msg);
    }
  } catch (error) {
    console.error('请求出错:', error);
  } finally {
    loading.value = false;
  }
};

// 格式化状态显示
const formatState = (state) => {
  const stateMap = {
    '0': '预备',
    '1': '启用',
    '2': '禁用'
  };
  return stateMap[state] || '未知状态';
};

// 计算当前页显示的数据
const currentPageData = computed(() => {
  return customerList.value;
});

// 分页大小变化
const handleSizeChange = (val) => {
  pageSize.value = val;
  currentPage.value = 1;
  fetchCustomerData();
};

// 当前页变化
const handleCurrentChange = (val) => {
  currentPage.value = val;
  fetchCustomerData();
};

// 新增客户
const handleAdd = () => {
  router.push({ 
    path: '/supplier/curd',
    query: { viewState: 'create' }
  });
};

// 删除客户
const handleDelete = async (row) => {
  try {
    const response = await deleteSupplierInfo(row.id);
    if (response.code === 200) {
      ElMessage.success('删除成功');
      fetchCustomerData();
    } else {
      ElMessage.error(response.msg || '删除失败');
    }
  } catch (error) {
    console.error('删除出错:', error);
    ElMessage.error('删除过程中发生错误');
  }
};

// 编辑客户
const jumpEdit = (row) => {
  router.push({ 
    path: '/supplier/curd',
    query: { 
      viewState: 'update',
      id: row.id
    }
  });
};

// 查看详情
const jumpDetails = (row) => {
  router.push({ 
    path: '/supplier/curd',
    query: { 
      viewState: 'view',
      id: row.id
    }
  });
};

onMounted(() => {
  fetchCustomerData();
});
</script>

<style scoped>
.main {
  padding: 20px;
}
.el-table {
  margin-top: 15px;
}
</style>